<template>
  <view class="">
    <u-popup v-model="show" mode="bottom" border-radius="28">
      <view class="share flex align-center justify-around">
        <button @click="handOpen">
          <image src="/static/user/image.png" mode=""></image>
          <text>生成图片分享</text>
        </button>
        <button open-type="share">
          <image src="/static/user/dy.png" v-if="platform == '抖音'" mode=""></image>
          <image src="@/static/wx.png" v-else></image>
          <text>转发{{ platform }}好友</text>
        </button>
      </view>
    </u-popup>
    <qr-code-pop ref="qrCode" />
  </view>
</template>

<script>
import qrCodePop from './qrCodePop.vue'
export default {
  components: {
    qrCodePop
  },
  data () {
    return {
      show: false,
      platform: '',
    }
  },
  methods: {
    handOpen () {
      this.show = false
      this.$refs.qrCode.showEdit()
    },
    showEdit () {
      // 判断平台
      // #ifdef MP-WEIXIN
      this.platform = '微信'
      // #endif
      // #ifdef MP-TOUTIAO
      this.platform = '抖音'
      // #endif
      this.show = true
    },
  }
}
</script>

<style lang="scss" scoped>
.share {
  padding: 56rpx 0;

  button {
    margin: 0;
    background-color: rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }

    image {
      width: 144rpx;
      height: 144rpx;
    }

    text {
      margin-top: 16rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
}
</style>